//封装函数获取分类数据并渲染到页面上       获取数据渲染页面功能
function renderCategory() {
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
            // console.log(res);
            if (res.status == 0) {
                let html = '';
                $.each(res.data, function (index, value) {
                    // console.log(index);
                    // console.log(value);
                    html += ` <tr>
                    <td>${value.name}</td>
                    <td>${value.alias}</td>
                    <td>
                        <button type="button" class="layui-btn layui-btn-xs"  data-id="${value.id}" data-name="${value.name}" data-alias="${value.alias}">编辑</button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" data-id="${value.id}" >删除</button>
                    </td>
                </tr>
                        `
                })
                $('tbody').html(html)
            }
        }
    })
}
renderCategory()


//给生成的结构“删除”按钮添加点击事件      删除功能
$('tbody').on('click', 'button:contains("删除")', function () {
    //获取id值
    let id = $(this).data('id')
    //弹出询问框
    layer.confirm('你确定要删除吗?', { title: '提示' }, function (index) {
        // console.log(id);
        $.ajax({
            url: '/my/category/delete',
            data: { id: id },
            success: function (res) {
                // console.log(res);
                layer.msg(res.message)
                if (res.status == 0) {
                    renderCategory()
                }
            }
        })
        layer.close(index);
    });

})


//给添加类别按钮添加点击事件             弹出层功能
// 给全局变量方便下个事件使用
let addindex;
$('button:contains("添加类别")').on('click', function () {
    // 用open核心方法创建层，并设置其样式
    addindex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(), //使用模板引擎方法
        area: ['500px', '250px']
    });
})

//给模板引擎的表单添加表单提交事件      添加类别功能
$('body').on('submit', '.form-add', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: '/my/category/add',
        data: $(this).serialize(),   //获取当前点击的表单里的值
        success: function (res) {
            // console.log(res);
            layer.msg(res.message)
            if (res.status == 0) {
                //关闭弹出层
                layer.close(addindex)
                renderCategory()
            }
        }
    })
})



//给编辑按钮添加点击事件             弹出层功能
// 给全局变量方便下个事件使用
let editindex;
$('tbody').on('click', 'button:contains("编辑")', function () {
    // console.log(12);
    let data = $(this).data()      //获取所有data-的值
    // console.log(data);
    editindex = layer.open({
        type: 1,
        title: '编辑类别',
        content: $('#tpl-edit').html(), //这里content是一个普通的String
        area: ['500px', '250px'],
        //弹层出现后执行的函数
        success: function () {
            let form = layui.form
            // console.log(form);
            // form.val('form里lay-filter的值','对象类型')
            form.val('edit', data)
        }
    });
})

//给模板引擎的表单添加表单提交事件      添加类别功能
$('body').on('submit', '.form-edit', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: '/my/category/update',
        data: $(this).serialize(),   //多加个input框隐藏域，给name='id'值
        success: function (res) {
            // console.log(res);
            layer.msg(res.message)
            if (res.status == 0) {
                layer.close(editindex)
                renderCategory()
            }
        }
    })
})